<template>
  <div class="app-container">
    <!-- 按钮行 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:user:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:user:import']"
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:user:export']"
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <el-tooltip class="top-right-btn" effect="dark" content="刷新" placement="top">
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
      </el-tooltip>
    </el-row>
    <!--  表格数据  -->
    <el-table v-loading="loading" :data="communities">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left">
            <el-form-item label="地址">
              <span>{{ props.row.addr }}</span>
            </el-form-item>
            <el-form-item label="开发商">
              <span>{{ props.row.developers }}</span>
            </el-form-item>
            <el-form-item label="物业公司">
              <span>{{ props.row.propertyCompany }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" align="center" />
      <el-table-column label="负责人" prop="principal" align="center" />
      <el-table-column label="联系方式" prop="phone" align="center" />
      <el-table-column label="占地面积(平米)" prop="floorSpace" align="center" />
      <el-table-column label="建筑面积(平米)" prop="coveredArea" align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center" />
      <el-table-column
        label="操作"
        align="center"
        width="160"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['system:user:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            v-if="scope.row.userId !== 1"
            v-hasPermi="['system:user:remove']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  新增或修改对话框  -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="name">
              <el-input v-model="form.name" placeholder="请输入小区名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="principal">
              <el-input v-model="form.principal" placeholder="请输入小区联系人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="占地面积" prop="floorSpace">
              <el-input v-model="form.floorSpace" placeholder="请输入占地面积">
                <template slot="append">平米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="占地面积" prop="coveredArea">
              <el-input v-model="form.floorSpace" placeholder="请输入建筑面积">
                <template slot="append">平米</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="开发商" prop="addr">
          <el-input v-model="form.developers" placeholder="请输入开发商名称" />
        </el-form-item>
        <el-form-item label="物业公司" prop="addr">
          <el-input v-model="form.propertyCompany" placeholder="请输入物业公司名称" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { communities } from './data'

export default {
  name: 'Index',
  data() {
    return {
      loading: false,
      communities: communities,
      title: '',
      // 打开 新增或修改 对话框
      open: false,
      // 表单校验
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        principal: [
          { required: true, message: '负责人不能为空', trigger: 'blur' }
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
            required: true
          }
        ]
      },
      form: {}
    }
  },
  methods: {
    // 点击新增按钮
    handleAdd() {
      this.initForm()
      this.title = '创建小区'
      this.open = true
    },
    initForm() {
      this.form = {
        name: '',
        principal: '',
        phone: '',
        floorSpace: undefined,
        coveredArea: undefined,
        addr: '',
        developers: '',
        propertyCompany: ''
      }
    },
    handleUpdate(community) {
      this.form = community
      this.title = '修改小区信息'
      this.open = true
    },
    submitForm() {
      this.open = false
    },
    cancel() {
      this.open = false
    },
    handleDelete(community) {
      this.$confirm(
        '是否确认删除 【' + community.name + '】 的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          // return delUser(userIds)
        })
        .then(() => {
          // this.getList()
          this.msgSuccess('删除成功')
        })
    }
  }
}
</script>

<style>

</style>
